<template>
	<view class="weui-tabbar" :class="extClass">
		<!-- 选中的时候往weui-tabbar__item加class:weui-bar__item_on -->
		<view @click="tabChange(index)" v-for="(item, index) in list" :key="index" class="weui-tabbar__item"
			:class="{'weui-bar__item_on':index === current}">
			<view style="position: relative;display:inline-block;">
				<image :src="current === index ? item.selectedIconPath : item.iconPath" class="weui-tabbar__icon">
				</image>
			</view>
			<view class="weui-tabbar__label">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				extClass: '',
				current: uni.getStorageSync('current')?uni.getStorageSync('current'):0,
				list: [
					{
						"text": "返回",
						"iconPath": 'https://dev.mingyuanriji.cn/web/static//new_bac.png',
						"selectedIconPath": 'https://dev.mingyuanriji.cn/web/static//new_bac.png'
					},										
					{
						"text": "首页",
						"iconPath": 'https://www.mingyuanriji.cn/web//uploads/images/original/20210506/dd6672076ec5386b6dc2e06040a0b802.png',
						"selectedIconPath": 'https://www.mingyuanriji.cn/web//uploads/images/original/20210506/2cacecc12ab4ae6fd6cb233da7089f75.png'
					},
					{
						"text": "订单",
						"iconPath": 'https://dev.mingyuanriji.cn/web/static/samecity.png',
						"selectedIconPath": 'https://dev.mingyuanriji.cn/web/static/samecitycheck.png'
					},
					{
						"text": "我的",
						"iconPath": 'https://www.mingyuanriji.cn/web//uploads/images/original/20210506/08ba1fe2754bc566116a39deee8fdd90.png',
						"selectedIconPath": 'https://www.mingyuanriji.cn/web//uploads/images/original/20210506/e6e4ff50b6ef41c1ab17775f676d7b4f.png'
					}
				],
			};
		},
		methods: {
			tabChange(index) {
				uni.setStorageSync('current',index)
				if (index == 0){
					uni.removeStorageSync('current',index)
					uni.removeStorageSync('shopCity')
					uni.redirectTo({
						url:'../../pages/index/index'
					})
				}
				if (index == 1) {
					uni.redirectTo({
						url:'../../oilHome/oilHome'
					})
				}
				if (index == 2) {
					uni.navigateTo({
						 url: '/easy_oil/easyOilOrder/easyOilOrder'
					})
				}
				if (index == 3) {
					uni.removeStorageSync('current',index)
					uni.removeStorageSync('shopCity')
					uni.redirectTo({
						url:'../../pages/user/index'
					})
				}
				if (index != 2) {
					this.current = index;
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weui-tabbar {
		display: flex;
		position: relative;
		z-index: 500;
		background-color: #ffffff;
	}

	.weui-tabbar:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.1);
	}

	.weui-tabbar__item {
		display: block;
		flex: 1;
		padding: 8px 0 4px;
		padding-bottom: calc(8px + constant(safe-area-inset-bottom));
		padding-bottom: calc(8px + env(safe-area-inset-bottom));
		font-size: 0;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.weui-tabbar__item:first-child {
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
	}

	.weui-tabbar__item:last-child {
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
	}

	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
		color: rgb(53, 53, 53);
	}

	.weui-tabbar__icon {
		display: inline-block;
		width: 28px;
		height: 28px;
		margin-bottom: 2px;
	}

	i.weui-tabbar__icon,
	.weui-tabbar__icon>i {
		font-size: 24px;
		color: rgba(0, 0, 0, 0.5);
	}

	.weui-tabbar__icon image {
		width: 100%;
		height: 100%;
	}

	.weui-tabbar__label {
		color: rgb(53, 53, 53);
		font-size: 10px;
		line-height: 1.4;
	}
</style>
